<!--
 * @Author: lpz1096
 * @Date: 2021-12-07 16:02:45
 * @LastEditors: lpz1096
 * @LastEditTime: 2021-12-13 15:44:03
 * @Description:
 * @FilePath: \ptadmin\src\views\order\account\index.vue
-->
<template>
  <div class="warp">
    <a-page-header>
      <template v-slot:title>订单结算</template>
    </a-page-header>
    <a-form class="table-header-search" layout="inline">
      <a-row>
        <a-form-model-item label="时间段查询">
          <a-range-picker v-model="queryForm.created_at_range" style="width: 220px">
            <a-icon slot="suffixIcon" type="clock-circle" />
          </a-range-picker>
        </a-form-model-item>
        <a-form-model-item label="市场选择" v-if="tabActivity === 1">
          <a-select
            allowClear
            v-model="queryForm.market_id"
            style="width: 160px"
            placeholder="所属市场"
          >
            <a-select-option
              v-for="(item, index) in marketData"
              :key="index"
              :value="item.id"
            >{{ item.name }}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="商户查询">
          <a-input v-model.trim="queryForm.merchant_name" placeholder="请输入商户名称" allowClear />
        </a-form-model-item>
        <a-form-model-item :label="tabActivity == 1 ? '订单号查询' : '交易单号查询'">
          <a-input v-model.trim="queryForm.order_no" placeholder="请输入交易单号" allowClear />
        </a-form-model-item>
        <a-form-model-item label="支付方式" v-if="tabActivity === 1">
          <a-select allowClear v-model="queryForm.pay_type" style="width: 160px" placeholder="支付方式">
            <a-select-option
              v-for="(item, index) in { 0: '余额支付', 1: '微信支付' }"
              :key="index"
              :value="index"
            >{{ item }}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item class="operation-button">
          <!-- :disabled="
              Object.values(queryForm).every((item) => !item)
          "-->
          <a-button
            @click="search"
            type="primary"
            icon="search"
            v-has="'orderAccount.rechargeQuery'"
          >搜索</a-button>
        </a-form-model-item>
      </a-row>
    </a-form>
    <a-tabs type="card" @change="switchTab">
      <a-tab-pane :key="index" :tab="item.label" v-for="(item, index) in tabList"></a-tab-pane>
    </a-tabs>
    <div>
      <rechargeTable ref="rechargeTable" v-if="tabActivity == 0" :queryForm="queryForm" />
      <paymentTable ref="paymentTable" v-else :queryForm="queryForm" :marketData="marketData" />
    </div>
  </div>
</template>
<script>
import rechargeTable from "./components/recharge-table.vue"
import paymentTable from "./components/payment-table.vue"
import salemarket from "@/api/salemarket"
import day from '../../../utils/day'
const orderBy = {
  order: "created_at",
  by: "desc"
}
export default {
  name: 'orderAccount',
  components: {
    rechargeTable,
    paymentTable
  },
  data () {
    return {
      queryFormRec: {
        created_at_range: null,
        merchant_name: '',
        order_no: '',
        ...orderBy
      },
      queryFormPay: {
        created_at_range: null,
        merchant_name: '',
        order_no: '',
        ...orderBy
      },
      queryForm: orderBy,
      tabList: [{
        value: 1,
        label: '充值记录'
      }, {
        value: 2,
        label: '支付记录'
      }],
      tabActivity: 0,
      marketData: [],
    }
  },
  mounted () {
    this.getMarketList()
  },
  methods: {
    search () {
      //格式化时间
      if (this.queryForm.created_at_range && this.queryForm.created_at_range.length) {
        const { created_at_range } = this.queryForm
        this.queryForm.created_at_range = day.FormatDate(new Date(created_at_range[0]['_d']), 'YYYY-MM-DD') + '_' + day.FormatDate(new Date(created_at_range[1]['_d']), 'YYYY-MM-DD')
      }
      if (this.tabActivity) {
        this.$refs.paymentTable.search()
      } else {
        this.$refs.rechargeTable.search()
      }
    },
    switchTab (event) {
      if (this.tabActivity) {
        this.queryForm = this.queryFormPay
      } else {
        this.queryForm = this.queryFormRec
      }
      this.tabActivity = event
    },
    async getMarketList () {
      await salemarket.query({}).then((response) => {
        if (response.code !== 1) {
          this.$message.warning(response.message)
          return
        }
        if (response.data && response.data.length) {
          this.marketData = response.data.map((item) => {
            return {
              id: item.id,
              name: item.name,
            }
          })
        }
      })
    },
  },
}
</script>

<style lang="less" scoped>
.form {
  margin-bottom: 10px;
}
.table-header-search {
  // height: 60px;
  background-color: #fff;
  line-height: 50px;
  padding: 10px 0 0 10px;
  margin-bottom: 10px;
}
/deep/.ant-tabs-card-bar {
  margin: 0;
}
/deep/.ant-page-header-ghost {
  padding: 0;
  margin-bottom: 9px;
}
</style>


